<template>
  <d2-container type="card" better-scroll>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-upload
          :action="action"
          :headers="headers"
          name="files"
          :on-success="successHandle"
          :on-preview="handlePreview"
          
        >
          <el-button
            icon="el-icon-thumb"
          
            class="btn_el-upload__tip"
            size="small"
            type="primary"
            >上传轮播图</el-button
          >
     
        </el-upload>
      </el-col>

      <el-col :span="1.5">
        <el-button
        
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['system:list:remove']"
          >删除</el-button
        >
      </el-col>

      <right-toolbar @queryTable="get_banner"></right-toolbar>
    </el-row>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column align="center" prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column align="center" prop="title" label="名称" width="180">
      </el-table-column>
      <el-table-column align="center" prop="address" label="地址">
        <template slot-scope="scope">
          <el-image
            style="width: 200px; height: 100px"
            :src="scope.row.imgUrl"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-upload
            :action="action"
            :headers="headers"
            :on-preview="handlePreview_1"
            name="files"
            :on-success="handlePreview_1"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
          
            :clearFiles="clearFiles"
            :limit="3"
          >
            <el-button @click="xiugai(scope.row.id)" size="small" type="primary"
              >修改</el-button
            >
          </el-upload>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:list:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </d2-container>
</template>

<script>
import axios from "axios";
import { getToken, getEnv, setEnv } from "@/utils/auth";
import {
  getlunbo_list,
  putlunbo_list,
  dellunbo_list,
  editlunbo_list,
} from "@/api/jiemian/index.js";
// import util from "@/libs/util";
export default {
  data() {
    return {
      xuan_id: null,
      beseUrl: "https://sm.ms",
      fileList: [],
      url: null,
      tableData: null,
      form: {
        startTime: "",
        endTime: "",
        // max:'',
        courseClassId: "",
      },
      xuan_arr: [],

      arr: [],
      token: getToken(),

      from_img: {
        title: new Date().getTime(),
        url: "https://www.baidu.com",
      },
    };
  },
  computed: {
    action() {
      if(getEnv()=='1'){
        return  process.env.VUE_APP_BASE_API+'/system/admin/uploadFile'
      }else{
         return process.env.VUE_APP_TEST_API+"/system/admin/uploadFile";
      }
    },
    headers() {
      return {
        Authorization: this.token,
      };
    },
  },
  methods: {
    xiugai(e) {
      this.xuan_id = e;
    },
    handleRemove() {},

    beforeRemove() {},
    handleSelectionChange(e) {
      console.log(e);
      this.xuan_arr = e.map((item) => {
        return item.id;
      });
    },
    //修改
    handlePreview_1(response) {
      if (response && response.code == 200) {
        console.log(response);

        editlunbo_list({
          id: this.xuan_id,
          imgUrl: response.data[0],
        }).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.get_banner();
        });
      } else {
        this.$message.error(response.message);
      }
      this.clearFiles()
    },
    clearFiles(){
      console.log('qc')
    },

    // 上传成功
    successHandle(response) {
      console.log(response);
      if (response && response.code == 200) {
        console.log(response);

        putlunbo_list({
          imgUrl: response.data[0],
        }).then((res) => {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          this.get_banner();
        });
      } else {
        this.$message.error(response.message);
      }
    },

    get_banner() {
      console.log("请求");
      getlunbo_list().then((res) => {
        // console.log(res.data);
        // this.fileList = res.data.map((item) => {
        //   return {
        //     status: "success",
        //     uid: item.id,
        //     url: item.imgUrl,
        //     title: item.imgUrl,
        //     name: item.imgUrl,
        //   };
        // });
        this.tableData = res.data;

        console.log(this.tableData);
      });
    },
    handleDelete(data) {
      let arr = [];
      arr.push(data.id);
      console.log(arr);
      this.$modal
        .confirm('是否确认删除编号为"' + data.id + '"的轮播图吗？')
        .then(function () {
          return dellunbo_list(data.id);
        })
        .then(() => {
          this.get_banner();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  created() {
    this.get_banner();
  },
};
</script>

<style>
.mb8{
  padding: 20px;
}
.lunbo_zhu {
  width: 100%;

  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.phone_zhu {
  border-radius: 40px;
  width: 440px;

  background: rgb(238, 234, 234);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;

  background-color: #39a9ed;
}
/* 媒体查询 */
@media screen and (max-width: 668px) {
  .phone_zhu {
    width: 440px;
    height: 100%;
  }
}
.upload-demo {
  width: 100%;
  height: 550px;
}
</style>
